<template>
    <div>
        <div style="margin-bottom: 10px">
        <Button type="ghost" @click="addClient"><Icon type="plus" class="margin-right-8"></Icon>添加客户</Button>
        </div>
        <div class="margin-bottom-20">
            <Table border :columns="clientsColumn" :data="clientsData" :loading="loading"></Table>
        </div>
        <Page :total="20"  size="small" show-elevator :page-size-opts="[10, 15, 20]" show-sizer @on-change="changePage" @on-page-size-change="changePageSize"></Page>
        <Spin size="large" fix v-if="spinShow">加载中...</Spin>
    </div>
</template>

<script>
import * as client from '../../http/client.api'
export default {
    data() {
        return {
            total: 0,
            loading: false,
            spinShow: false,
            clientsData: [],
            clientArgs: {
                search: '',
                pageReqired: true,
                limit: 10,
                offset: 0,
                sort: 'createTime',
                order: 'desc'
            },
            forbiddenArgs: {
                id: '',
                status: 'forbidden'
            },
            clientsColumn: [
                {
                    title: '状态',
                    key: 'status',
                    align: 'center',
                    width: 80,
                    render: (h, {index, row, column}) => {
                        return h('div', {
                            class: {
                                status: true,
                                [row.status]: true
                            }
                        });
                    }
                },
                {
                    title: '客户编号',
                    key: 'customerNo',
                },
                {
                    title: '业务系统',
                    key: 'bizSystem',
                },
                {
                    title: '联系人',
                    key: 'employeeName',
                },
                {
                    title: '联系方式',
                    key: 'contact',
                },
                {
                    title: '用户名',
                    key: 'userName',
                },
                {
                    title: '开始日期',
                    key: 'createTime',
                    render: (h, {index, row, column}) => {
                        return h('p', {}, this.$moment(row.createTime).format('YYYY-MM-DD HH:mm:ss'));
                    }
                },
                {
                    title: '操作',
                    key: 'operation',
                    width: 300,
                    align: 'center',
                    render: (h, params) => {
                        const _this = this;
                        return h('div', [
                             h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    width:'50px',
                                    marginRight: '10px'
                                },
                                on: {
                                    click: () => {
                                        this.forbidClient(params.row.id)
                                    }
                                }
                            }, '禁用'),
                             h('Button', {
                                props: {
                                    type: 'info',
                                    size: 'small'
                                },
                                style: {
                                    width:'50px',
                                    marginRight: '10px'
                                },
                                on: {
                                    click: () => {
                                        this.$router.push(`/addClient?id=${params.row.id}`)
                                    }
                                }
                            }, '编辑'),
                            h('Button', {
                                props: {
                                    type: 'ghost',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '10px'
                                },
                                key: 'employees',
                                on: {
                                    click: () => {
                                    }
                                }
                            }, '重置密码')
                        ]);
                    }
                },
            ]
        }
    },
    methods: {
        // 获取客户列表
        getCustomers() {
            const _this = this
            this.loading = true
            client.getClients(this.clientArgs).then(res => {
                if (res.data.success) {
                    _this.clientsData = res.data.rows
                } else {
                    _this.$Message.error(res.data.message)
                }
            }).catch(err => {
                this.$Message.error("错误代码【"+err.data.code+"】，"+err.data.message)
            }).finally(() => {
                this.loading = false
            })
        },
        // 新增客户
        addClient() {
            this.$router.push({path: '/addClient'});
        },
        // 禁止用户
        forbidClient(id){
            const _this = this;
            this.forbiddenArgs.id = id;
            this.$Modal.confirm({
                title: '禁止客户',
                content: `<h4>说明:对当前用户进行暂停活动?</h4>`,
                loading: true,
                onOk: () => {
                    this.spinShow = true
                    client.operateCustomer(this.forbiddenArgs).then(suc => {
                        /*console.log(suc)*/
                        this.getCustomers();
                        this.$Modal.remove();
                        this.spinShow = false
                    }).catch(err => {
                        this.$Message.error("错误代码【"+err.data.code+"】，"+err.data.message)
                        this.$Modal.remove()
                        this.spinShow = false
                    })
                },
                onCancel: () => {
                }
            })
        },
        // 修改页数
        changePage(n) {
            let pageSize = this.clientArgs.limit;
            this.clientArgs.offset = (n-1) * pageSize;
            this.getCustomers()
        },
        // 修改页码
        changePageSize(n) {
            this.clientArgs.limit = n;
            this.getCustomers();
        }
    },
    mounted() {
        this.getCustomers();
    }
}
</script>

<style>
.status {
    display: inline-block;
    text-align: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #999;
}
    .normal {
        background: #2eba07;
    }
    .forbidden {
        background: #fe5500;
    }
</style>